@import url("../../style.less");
.page{
	// background-color: #f5f6f9;
	.head-top{
		width: 100%;
		height: 220rpx;
        // padding-top: 20rpx;
		// background:  url('@{images-url}home-bg3.png') no-repeat;
		background-color: #436cff;
		background-repeat: no-repeat;
		// background: #436cff url('../../static/home-bg2.png') no-repeat;
		background-size: cover;
		position: relative;
		.search-wrapper{
			width: 94%;
			height: 96rpx;
			// background-color: #f2f4f5;
			background-color: #ffffff;
			margin: 20rpx auto 0;
			border-radius: 5px;
			display: flex;
			align-items: center;
            justify-content: center;
			.input-wrapper{
				display: flex;
				flex: 1;
				.uni-input{
					flex: 1;
					margin-left: 20rpx;
				}
			}
			.tags-wrapper{
				flex: 1;
				padding: 0 20rpx;
				position: relative;
                overflow: hidden;
			}
			.search-icon{
				width: 50rpx;
				margin-right: 20rpx;
				cursor: pointer;
			}
            .clear-icon{
                margin-top: -6rpx;
            }
		}
		.tabs{
			font-size: 34rpx;
			width: 420rpx;
			display: flex;
			text-align: center;
			margin: auto;
			color: rgba(255, 255, 255, 0.6);
			padding: 20rpx 0 20rpx;
			font-family: 'PingFangSC-Medium';
			.tab-item{
				flex: 1;
				position: relative;
			}
			.active{
				color: #fff;
				&::after{
					content: '';
					position: absolute;
					height: 2px;
					width: 34px;
					background: #fff;
					top: 25px;
					left: calc(50% - 17px);
					border-radius: 2px;
				}
			}
		}
	}
	.result-content{
		padding: 10rpx 0;
		.item-list{
            .item{
                .item-wrapper {
                    position: relative;
                    padding: 12rpx 24rpx 28rpx;
                    .item-best{
                        position: absolute;
                        right: 10rpx;
                        top: 0;
                    }
                    .item-top{
                        display: flex;
                        align-items: center;
                        .item-image{
                            padding-top: 10rpx;
                            width: 90rpx;
                            text-align: center;
                        }
                        .item-title{
                            flex: 1;
                        }
                    }
                    .item-bottom{
                        display: flex;
                        font-size: 28rpx;
                        align-items: center;
                        margin-top: 4rpx;
                        width: 100%;
                        .split-line{
                            width: 2rpx;
                            height: 50rpx;
                            background-color: #e0e0e0;
                        }
                        .text-block{
                            flex: 1;
                            text-align: center;
                            .text-label{
                                font-size: 26rpx;
                                color: #999;
                                margin-bottom: 8rpx;
                            }
                            .text-value{
                                color: #333;
                                &.value-90{
                                    color: #02ac82;
                                }
                                &.value-80{
                                    color: #FF8F1F;
                                }
                                &.value-70{
                                    color: #696969;
                                }
                            }
                        }
                        .copy-btn{
                            padding: 0 10rpx;
                        }
                    }
                    .text-title{
                        font-size: 30rpx;
                        flex: 1;
                        padding-left: 30rpx;
                        padding-right: 20rpx;
                    }
                }
            }
			.empty{
				color: #969696;
				text-align: center;
                padding: 30px;
                .image-wrapper{
                    margin-bottom: 20px;
                    opacity: .4;
                }
                .link{
                    color: #3780ff;
                }
			}
		}
	}
    .h10{
        height: 20rpx;
        background-color: #f3f4f5;
    }
    .h6{
        height: 12rpx;
        background-color: #f3f4f5;
    }
    .h5{
        height: 10rpx;
        background-color: #f3f4f5;
    }
	.h3{
	    height: 6rpx;
	    background-color: #f3f4f5;
	}
}